<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>

    <script src="../react/react.development.js"></script>
    <script src="../react/react-dom.development.js"></script>
    <script src="../react/babel.min.js"></script>

    <script type="text/babel">
        class Child extends React.Component { //可以接受父组件传递的值 constructor(props) { super(); console.log(this.props);//undefined 当super(props) 时 this.props是有值的 // console.log(props);//有值，父组件传递过来的值 } render() { //======>>>>不用写 类组件中的 constructor 函数 在render函数中也可以使用
        this.props 来获取 父组件传递 过来的参数,react内部帮我们保存了props //======>>>>正常情况下 子组件接受 props 要在 constructor(props)函数中接受 props 然后在 super(props); // console.log(this.props);//有值 父组件传递过来的值 return (
        <div>我是子组件</div>
        ) } } class Child2 extends React.Component { //======>>>> 要使用 this.state 保存状态值必须调用constructor函数 和 super() //======>>>> 如果不使用 this.state 则可以不用 调用constructor函数。 // constructor () { // super(); // this.state = { // width: 10 // }; // } render() { // console.log(this.props);
        // console.log(this.state); return (
        <div>我是子组件Child2</div>
        ) } } class APP extends React.Component { constructor() { super(); this.state = { name: "cjx", age: 10 }; } render() { let {name, age} = this.state; return (
        <div>
            <div>我是div元素</div>
            <hr />
            <Child name={name} age={age}/>
            <Child2 name={name} age={age}/>
        </div>


        ) } } ReactDOM.render(

        <APP />, document.getElementById('app'));
    </script>
</body>

</html>